import {View, Text} from 'react-native';
import React from 'react';
import AdminLogin from './screens/AdminLogin';
import MainMenu from './screens/MainMenu';
import ProductList from './screens/ProductList';
import ProductDetail from './screens/ProductDetail';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// 标题栏样式对象
let titleStyle = {
  headerStyle: {backgroundColor: '#0aa1ed'}, //标题背景颜色
  headerTintColor: '#fff', //标题文字颜色 (Tint:颜色)
  headerTitleAlign: 'left', //标题文字对齐方式(left 或 center)
  headerTitleStyle: {fontSize: 18}, //标题栏字体设置
};

// 创建原生APP栈式导航器,f返回导航器和屏幕组件
let {Navigator, Screen} = createNativeStackNavigator();

export default function App() {
  return (
    // 路由器/导航容器      => 路由词典/导航器 => 路由
    // NavigationContainer => navigator      => screen
    // 路由词典中的第一个默认是App首页,也可以指定initialRouteName  控制默认首页
    <NavigationContainer>
      <Navigator initialRouteName="login">
        <Screen
          name="login"
          component={AdminLogin}
          options={{
            ...titleStyle,
            title: '管理员登录', //标题栏文字
          }}></Screen>
        <Screen
          name="menu"
          component={MainMenu}
          options={{
            ...titleStyle,
            title: '主菜单',
          }}></Screen>
        <Screen
          name="list"
          component={ProductList}
          options={{
            ...titleStyle,
            title: '商品列表',
          }}></Screen>
        <Screen
          name="detail"
          component={ProductDetail}
          options={{
            ...titleStyle,
            title: '详情内容',
          }}></Screen>
      </Navigator>
    </NavigationContainer>
  );
}
